<template>
  <div>
    <div id="user_message_title">&nbsp;&nbsp;
      <span>患者信息</span>
    </div>
    <div id="user_message_div">
      <div id="user_message_div_1">
        <div class="user_message_div_1">患者姓名：{{this.userMessage.name}}</div>
        <div class="user_message_div_1" v-if="this.userMessage.gender == 0">性别：男</div>
        <div class="user_message_div_1" v-if="this.userMessage.gender == 1">性别：女</div>
        <div class="user_message_div_1">年龄：{{this.userMessage.age}}</div>
        <div class="user_message_div_1">手机号：{{this.userMessage.telphone}}</div>
      </div>
      <div id="user_message_div_2">
        <div class="user_message_div_2">所患疾病：{{this.userMessage.illness}}</div>
        <div class="user_message_div_2">肝功能：{{this.userMessage.liverfunc}}</div>
        <div class="user_message_div_2">肾功能：{{this.userMessage.renalfunc}}</div>
        <div class="user_message_div_2">过敏史：{{this.userMessage.allergy}}</div>
        <div class="user_message_div_2">生育计划或状态：{{this.userMessage.birthplan}}</div>
      </div>
      <div id="user_message_div_3">病情描述：{{this.userMessage.symptom}}</div>
      <div id="user_message_div_4">已选药品及用药情况：
        <el-button type="primary" @click="showFormulation()" style="margin-left:800px">查看原始处方</el-button>
        <el-dialog title="查看原始处方" :visible.sync="dialogImageVisible">
          <!-- <el-upload class="avatar-uploader" action="http://192.168.8.108:12306/aliyunoss/file/upload" accept=".jpeg,.png,.jpg,.bmp,.gif"
            :show-file-list="false" :on-success="uploadSuccess"> -->
            <el-image style="width: 400px; height: 400px; margin-left:250px" :src="url" fit="scale-down"></el-image>
          <!-- </el-upload> -->
        </el-dialog>
      </div>
      <div id="user_message_medical">
        <div id="user_message_div_5" v-for="(item,index) in medicines" :key="index">
          <div id="picture">
            <!-- <img :src="image_urls[index]" alt="" width="100px"> -->
            <el-image style="width: 100px; height: 100px" :src="image_urls[index]" fit="scale-down" :preview-src-list="image_urls"></el-image>
          </div>
          <div class="user_message_div_5">
            <div id="rx">&nbsp;Rx&nbsp;&nbsp;</div>
            <div id="rx_name">&nbsp;&nbsp;{{item.name}} &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;x{{medicines_use[index].medicine_quantity}}</div>
          </div>
          <div class="user_message_div_5">规格：{{item.specifications}}</div>
          <div class="user_message_div_5" style="color: red">¥{{item.price}}</div>
          <div id="user_message_div_6">用药情况： {{medicines_use[index].use_status}}；{{item.useWay}}，{{medicines_use[index].use_frequency}}，{{medicines_use[index].use_quantity}}，用药21天</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "PrescriptionUserMessage",
  props: {
    prescription: ''
  },
  data () {
    return {
      medicines: [],
      medicineIds: [],
      medicines_use: [],
      userMessage: '',
      image_urls: [],
      dialogImageVisible: false,
      url: ''
    }
  },
  methods: {
    //获取对应处方的所有药品id
    getMedicineIds(){
      this.$axios.get('/prescription/findMedicineIdsByPid/'+parseInt(this.prescription.id)).then(res => {
        if(res.data.code == 200){
          this.medicineIds = res.data.data

          //获取对应处方的所有药品
          this.$axios.post('/prescription/batchFind',this.medicineIds).then(res2 => {
            if(res2.data.code == 200){
              this.medicines = res2.data.data
              //进行图片地址赋值
              for (let index = 0; index < this.medicines.length; index++) {
                this.image_urls[index] = this.medicines[index].image;
              }
            }
          }).catch();

          //获取对应处方的所有药品使用详情
          this.$axios.post('/prescription/findMedicine_Medicine',this.medicineIds).then(res3 => {
            if(res3.data.code == 200){
              this.medicines_use = res3.data.data
            }
          }).catch();

        }
      }).catch();
    },

    //上传图片的回调
    uploadSuccess(res) {
      this.url = res.data.url;
    },
    showFormulation(){
      this.dialogImageVisible = true;
      this.url = this.prescription.formulation_image
    }
  },
  created () {
    //查询处方对应患者的信息
    this.$axios.get('/prescription/findByRecord/'+parseInt(this.prescription.user_id)).then((res) => {
      if(res.data.code == 200){
        this.userMessage = res.data.data
      }
    });
    this.getMedicineIds();
  }
}
</script>

<style scoped>
#user_message_title {
  margin-right: 200px;
  margin-top: 20px;
  height: 50px;
  font-size: 20px;
  line-height: 50px;
  background-color: rgb(241, 241, 241);
}
#user_message_div {
  border: 1px solid rgb(216, 216, 216);
  margin-right: 200px;
  overflow: hidden;
}
#user_message_div_1 {
  float: left;
  width: 1100px;
  height: 50px;
}
.user_message_div_1 {
  /* border: 1px solid rgb(216, 216, 216); */
  float: left;
  width: 170px;
  margin-left: 20px;
  margin-top: 30px;
}
.user_message_div_2 {
  float: left;
  width: 170px;
  margin-left: 20px;
  margin-top: 30px;
}

#user_message_div_2 {
  float: left;
  width: 1100px;
  height: 50px;
}
#user_message_div_3,
#user_message_div_4 {
  float: left;
  width: 90%;
  margin-top: 30px;
  margin-left: 20px;
}
#look {
  float: right;
  margin-right: 10px;
}
#user_message_medical {
  float: left;
}
#user_message_div_5 {
  float: left;
  width: 500px;
  overflow: hidden;
  margin-top: 10px;
  margin-left: 20px;
  margin-bottom: 10px;
}
#picture {
  border: 1px solid rgb(216, 216, 216);
  float: left;
  width: 100px;
  height: 100px;
}
.user_message_div_5 {
  float: left;
  width: 380px;
  height: 30px;
  margin-left: 10px;
}
#user_message_div_6 {
  float: left;
  overflow: hidden;
  margin-top: 10px;
}
#rx {
  width: 30px;
  background-color: rgb(221, 2, 2);
  border-radius: 30px;
  color: white;
  float: left;
}
#rx_name {
  float: left;
}
#rx_num {
  float: right;
}
</style>
